<template>
  <el-card>
    <el-row type="flex" justify="space-between" style="margin-bottom: 10px">
      <el-col>
        <el-button size="small" @click="handleBack">返回上一页</el-button>
        <span style="font-weight: bold; margin-left: 10px">{{ title }}</span>
      </el-col>
      <div>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-row>
    <el-form :model="formModel" label-width="90px" :rules="rules" ref="form">
      <!-- 员工 -->
      <template>
        <!-- 供应商 -->
        <p>供应商</p>
        <el-card style="margin-bottom: 10px">
          <el-col :span="24">
            <el-form-item
              :rules="[
                {
                  required: true,
                  message: '请选择采购合同',
                  trigger: 'change',
                },
              ]"
              label="采购合同"
              prop="contractId"
            >
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formModel.contractId"
              >
              </el-input>
              <!-- <div style="display: flex; gap: 20px; align-items: center">
                <span v-if="formModel.contractId">{{
                  formModel.subjectFirmName
                }}</span>
                <el-button type="text" @click="selectFirmVisible = true">{{
                  formModel.contractId ? "请重新选择" : "请选择"
                }}</el-button>
              </div> -->
            </el-form-item>
          </el-col>

          <el-descriptions title="">
            <el-descriptions-item label="供应商名称" span="1"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="供应商ID" span="1"
              >18100000000</el-descriptions-item
            >
          </el-descriptions>
        </el-card>
        <el-card style="margin-bottom: 10px">
          <el-col :span="24">
            <el-form-item label="原料名称" prop="rawMaterialId">
              <el-input
                style="width: 150px"
                placeholder="请输入"
                v-model="formModel.rawMaterialId"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="订货数量" prop="num">
              <el-input
                placeholder="请输入"
                style="width: 150px"
                v-model="formModel.num"
              >
                <template slot="append">吨</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="7">
            <el-col :span="8">
              <el-form-item label="订单总价">
                {{ form.price * form.count }}
              </el-form-item>
            </el-col>
          </el-col> -->

          <el-col :span="24">
            <el-form-item label="卸货仓库" prop="unloadInventoryId">
              <el-select
                v-model="formModel.unloadInventoryId"
                filterable
                style="width: 150px"
              >
                <el-option
                  v-for="item in allInve"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="配送方式" prop="deliveryType">
              <el-radio-group v-model="formModel.deliveryType">
                <el-radio :label="0">供应商配送</el-radio>
                <el-radio :label="1">承运商配送</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 供应商 -->
          <el-col :span="7" v-if="formModel.deliveryType == '0'">
            <el-form-item label="" label-width="0" prop="supplierId">
              <el-input
                placeholder="请选择"
                v-model="formModel.supplierId"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 承运商 -->
          <el-col :span="7" v-if="formModel.deliveryType == '1'">
            <el-form-item label="" label-width="0" prop="carriersId">
              <el-input
                placeholder="请选择"
                v-model="formModel.carriersId"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-card>

        <el-card style="margin-bottom: 10px" v-if="formModel.id">
          <el-descriptions title="">
            <el-descriptions-item label="订单状态" span="24"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="订单ID" span="24"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item label="创建时间" span="24"
              >苏州市</el-descriptions-item
            >
            <el-descriptions-item label="最后编辑时间" span="24">
              学校
            </el-descriptions-item>
            <el-descriptions-item label="最后编辑人" span="24"
              >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
            >
          </el-descriptions>
        </el-card>
      </template>
    </el-form>
    <SelectFirmDialog
      :dialogVisible="selectFirmVisible"
      @onClose="selectFirmVisible = false"
      @onSubmit="selectFirm"
    ></SelectFirmDialog>
  </el-card>
</template>

<script>
import SelectNameDialog from "@/components/SelectDialog/SelectNameDialog";
import SelectFirmDialog from "./components/SelectFirmDialog";
//
import {
  addOrders,
  updateOrders,
  getOrders,
  allInventory,
} from "@/api/service/orderCenter/purchase";
import { validatePhoneNumber } from "@/utils";

export default {
  components: {
    SelectNameDialog,
    SelectFirmDialog,
  },
  data() {
    return {
      selectFirmVisible: false,
      rules: {
        nickName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "change",
          },
        ],
        deliveryType: [
          {
            required: true,
            message: "请选择配送方式",
            trigger: "change",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入订货数量",
            trigger: "change",
          },
        ],
        orgId: [
          {
            required: true,
            message: "请选择机构",
            trigger: "change",
          },
        ],
        deptId: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change",
          },
        ],
        phonenumber: validatePhoneNumber(),
        rawMaterialId: [
          {
            required: true,
            message: "请选择原料",
            trigger: "change",
          },
        ],
        unloadInventoryId: [
          {
            required: true,
            message: "请选择卸货仓库",
            trigger: "change",
          },
        ],
        capacity: [
          {
            required: true,
            message: "请输入仓库容量",
            trigger: "change",
          },
        ],
        province: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        city: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        county: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        location: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "change",
          },
        ],
        location: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "change",
          },
        ],
        supplierId: [
          {
            required: true,
            message: "请选择供应商",
            trigger: "change",
          },
        ],
        carriersId: [
          {
            required: true,
            message: "请选择承运商",
            trigger: "change",
          },
        ],
      },
      formModel: {
        rawMaterialId: "",
        deliveryType: "",
        num: "",
        capacity: "",
        province: "",
        city: "",
        county: "",
        location: "",
      },
      total: 0,
      allInve: [],
    };
  },
  methods: {
    getAllInventory() {
      allInventory().then((res) => {
        this.allInve = res.data.map((item) => ({
          ...item,
          label: item.name,
          value: item.id,
        }));
      });
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleValidateSuccess();
        } else {
          return false;
        }
      });
    },
    handleValidateSuccess() {
      if (!this.userId) {
        addOrders({
          ...this.formModel,
        }).then((res) => {
          console.log(res);
          this.handleOkToLink();
        });
      } else {
        updateOrders({
          ...this.formModel,
        }).then((res) => {
          console.log(res);
          this.handleOkToLink();
        });
      }
    },
    handleOkToLink() {
      this.$modal.msgSuccess("操作成功");
      // this.getUserInfo(this.userId);
      this.$router.push({
        path: "/orderCenter/purchase/index",
      });
    },
    handleBack() {
      this.$router.push({
        path: "/orderCenter/purchase/index",
      });
    },
    selectFirm(row) {
      this.form.contractId = row.id;
      this.form.subjectFirmName = row.name;
      this.$refs.form.validateField("contractId");
    },
    getUserInfo(userId) {
      if (userId) {
        getOrders(userId).then((response) => {
          console.log("11123", response);
          this.formModel = {
            ...this.formModel,
            ...response.data,
            ...response.sysUserInfo,
          };
        });
      }
    },
  },
  created() {
    this.getAllInventory();
    this.userId = this.$route.query.id;
    if (this.userId) {
      this.getUserInfo(this.userId);
    }
  },
  computed: {
    title() {
      return !this.$route?.query?.id ? "新增采购订单" : "修改采购订单";
    },
  },
};
</script>

<style lang="scss" scoped>
.tree-border {
  width: 150px;
}
.place_container {
  display: flex;
  .el-form-item {
    margin-right: 10px;
  }
}
</style>
